<template>

	<view class="content" v-if="userData">
		<text class="title">身份验证</text>
		<view class="from" v-if="userData">
			<view class="from-item">
				<text class="area">{{userData.countryNo}}</text>
				<input type="number" disabled :placeholder="userData.mobile" placeholder-class="phl" />
			</view>
			<view class="from-item">
				<input type="number" style="width: 350rpx;" v-model="transferDAO.code" placeholder="请输入验证码"
					placeholder-class="phl" />
				<text class="code" @click="getCode">{{codeMessage}}</text>
			</view>





		</view>
		<text class="title">对方会员ID/手机号码</text>
		<input type="text" placeholder="请输入对方会员ID/手机号码进行转账" v-model="transferDAO.receiveUser"
			placeholder-style="color:#BEBFC4" class="orderno" />
		<text class="title">转账金额</text>
		<view class="money">
			<text>U</text>
			<input type="text" placeholder="0.00" v-model="transferDAO.amount" class="amount-input"
				placeholder-style="color:#BEBFC4" />
			<view class="">
				<text style="color: #316BFF;margin-bottom: 15rpx;" @click="allWithdraw">全部</text>
				<text>钱包余额U{{userData.balance}}</text>
			</view>
		</view>
	</view>
	<button class="btn" @click="submit">转账</button>
	<text class="history" @click="bindBill">转账记录</text>
	<uni-pay ref="pay" :amount="transferDAO.amount" @bindPassWord="confirm"></uni-pay>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		transferApply,
		user,
		smsCode
	} from "@/util/api.js"
	import {
		onShow
	} from '@dcloudio/uni-app'
	onShow(() => {

		getUser()
	})
	const pay = ref()

	const transferDAO = ref({
		"amount": '',
		"receiveUser": "",
		"transactionPassword": "",
		"code": ""
	})
	const userData = ref()
	// 获取当前登录用户信息
	const getUser = async () => {
		const result = await user()

		if (result.code == 200) {
			userData.value = result.data
		}
	}
	// 获取短信
	const codeMessage = ref("获取验证码")
	let bok = true
	let num = 60
	const getCode = async () => {

		if (!bok) return false;
		bok = false
		uni.showLoading({
			mask: true
		})
		const result = await smsCode({
			countryNo: userData.value.countryNo,
			mobile: userData.value.mobile
		})
		uni.hideLoading()
		if (result.code != 200) {
			bok = true
			codeMessage.value = "获取验证码"
			return false
		}
		let timer = setInterval(() => {
			num--
			codeMessage.value = `${num}秒后重试`
			if (num <= 0) {
				bok = true
				codeMessage.value = "获取验证码"
				clearInterval(timer)
			}
		}, 1000)
	}
	// 全部转账
	const allWithdraw = () => {
		transferDAO.value.amount = userData.value.balance
	}
	// 账单
	const bindBill = () => {
		uni.navigateTo({
			url: "/pages/bill/bill?state=transfer"
		})
	}
	// 转账
	const submit = async () => {
		if (!transferDAO.value.code) {
			uni.showModal({
				title: "提示",
				content: "请输入验证码",
				showCancel: false
			})
			return false;
		}
		if (!transferDAO.value.amount) {
			uni.showModal({
				title: "提示",
				content: "请输入转账金额",
				showCancel: false
			})
			return false;
		}
		if (!transferDAO.value.receiveUser) {
			uni.showModal({
				title: "提示",
				content: "请输入对方ID或手机号",
				showCancel: false
			})
			return false;
		}
		if (transferDAO.value.amount <= 0) {
			uni.showModal({
				title: "提示",
				content: "转账金额必须大于0",
				showCancel: false
			})
			return false;
		}
		pay.value.show()
	}
	const confirm = async (e) => {
		uni.showLoading({
			mask: true
		})
		transferDAO.value.transactionPassword = e
		const result = await transferApply(transferDAO.value)
		uni.hideLoading()
		if (result.code == 200) {
			uni.showModal({
				title: "提示",
				content: "操作成功",
				showCancel: false,
				success: () => {
					uni.navigateBack()
				}
			})
		}
	}
</script>

<style lang="scss">
	.from {



		.from-item {
			width: 596rpx;
			height: 92rpx;
			background: #F2F5F9;
			border-radius: 23rpx;
			margin: 0 0 38rpx;
			text-indent: 30rpx;
			margin-bottom: 38rpx;
			display: flex;
			align-items: center;


			.phl {
				color: #999;
				font-size: 28rpx;
			}

			.area {
				display: block;
				margin-right: 38rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}

			.code {
				font-weight: bold;
				display: block;

				color: #333333;
				font-size: 28rpx;
			}
		}



	}

	.history {
		display: block;
		text-align: center;
		color: #666666;
		font-size: 35rpx;
	}

	.btn {
		width: 673rpx;
		height: 92rpx;
		background: linear-gradient(180deg, #4D75F6 0%, #7FA1F8 100%);
		border-radius: 23rpx;
		margin: 50rpx auto 38rpx;
		display: block;
		color: #fff;
		font-size: 30rpx;
		line-height: 92rpx;
	}

	.content {
		margin: 38rpx;
		padding: 38rpx;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 38rpx 0px rgba(49, 54, 70, 0.06);
		border-radius: 23rpx;

		.title {
			margin: 0 0 30rpx 0;
			color: #313646;
			font-size: 28rpx;
			font-weight: 800;
			display: block;
		}

		.orderno {
			display: block;
			width: 596rpx;
			height: 92rpx;
			background: #F2F5F9;
			border-radius: 23rpx;
			margin: 0 0 38rpx;
			text-indent: 30rpx;
		}

		.money {
			width: 596rpx;
			height: 154rpx;
			background: #F2F5F9;
			border-radius: 23rpx;
			margin: 0 0 20rpx;
			display: flex;
			align-items: center;

			text {
				display: block;
				font-size: 36rpx;
				color: #313646;
				margin-left: 20rpx;
				margin-right: 14rpx;
				font-weight: 800;
			}

			.amount-input {
				display: block;
				height: 100%;
				font-size: 58rpx;
				font-weight: 800;
				color: #333;
			}

			>view {
				width: 550rpx;

				text {
					font-size: 28rpx;
					display: block;
					color: #BEBFC4;
					text-align: right;
				}
			}
		}

	}

	page {
		background: #F6F7F9;
	}
</style>